<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NSpace, NDataTable, NButton } from 'naive-ui'
import http from '@/tools/http'

const columnsTableColumns = [
    {
        title: "数据库名称",
        key: "tableCat",
        width: 70,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "表名称",
        key: "tableName",
        width: 100,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "列名称",
        key: "columnName",
        width: 100,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "类型",
        key: "typeName",
        width: 70,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "长度",
        key: "columnSize",
        width: 30,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "非空",
        key: "isNullable",
        width: 30,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "自增",
        key: "isAutoincrement",
        width: 30,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "主键",
        key: "pkName",
        width: 50,
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "备注",
        key: "remarks",
        width: 150,
        ellipsis: {
            tooltip: true
        }
    }
]

const columnsData = reactive<any>({
    list: []
})

const columnsSearchFormValue = reactive<any>({
    datasourceName: "",
    tableName: ""
})

const router = useRouter()
const route = useRoute()

onMounted(() => {
    columnsSearchFormValue.datasourceName = route.query.datasourceName
    columnsSearchFormValue.tableName = route.query.tableName
    listColumns()
})

function listColumns() {
    http.post("/datasource/table/column/list", columnsSearchFormValue).then(({ data }) => {
        columnsData.list.length = 0
        for (let i = 0; i < data.data.length; i++) {
            columnsData.list.push(data.data[i])
        }
    })
}

</script>

<template>
    <div id="flame-container">
        <div class="header" style="font-size:18px;font-weight:500;line-height:34px;">
            <n-space justify="space-between">
                <div>
                    表名称：{{ columnsSearchFormValue.tableName }}
                </div>
                <div>
                    <n-button quaternary @click="router.back()">返回</n-button>
                </div>
            </n-space>
        </div>
        <div class="data-table" style="top:72px;bottom:12px;">
            <n-data-table :scroll-x="630" :scrollbar-props="{ trigger: 'none' }" style="height:100%" flex-height
                :columns="columnsTableColumns" :data="columnsData.list" :bordered="false" />
        </div>
    </div>
</template>

<style scoped>
</style>